<template>
  <div id="app">
      <Left :list='list' :activeIndex='activeIndex'></Left>
      <Right :child='list[activeIndex].child'></Right>
  </div>
</template>

<script>
import Left from './components/Left.vue';
import Right from './components/Right.vue';
import Mock from 'mockJs';
const data=Mock.mock({
  "list|9":[{
    title:'@ctitle(2)',
    "child|17":[{
      img:'@Image(100x100,@color)',
      title:'@ctitle'
    }]
  }]
})

export default {
  name: 'App',
  components: {
    Left,
    Right,
  },
  data(){
    return{
      list:data.list,
      activeIndex:0
    }
  },
  mounted(){
    this.bus.$on('changeActive',(index)=>{
      this.activeIndex=index
    })
  }
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  }
html,body,#app {
  display:  flex;
  flex-wrap: wrap;
}
</style>
